<#import "/jblog.html" as jblog/>
<#import "/jblog-admin.html" as jblogAdmin/>
<table style="height: 100%; width:100%; ">
	<tr>
		<td width="20%" style="height:100%;vertical-align:top;min-width:200px;">
			<table id="tb-widgets" class="am-table am-table-hover">
				<#list widgets as widget>
				<tr>
					<td style="width:100%;">${widget.title}</td>
					<td style="min-width:80px;padding-top:2px;" data="${widget.articleId}" markdown="${widget.markdown}">
						<span class="am-icon-edit" onclick="checkWidget(this);"></span>
						<span class="am-icon-trash" onclick="deleteWidget(this)"></span>
						<span class="am-icon-unsorted">
							<div direction="up" class="icon-up-block" onclick="move(this)">&nbsp;</div>
							<div direction="down" class="icon-down-block" onclick="move(this)">&nbsp;</div>
						</span>
					</td>
				</tr>
				</#list>
				<tr style="height:40px;">
					<td width="80%" colspan="2" align="center"><a id="btn-add-widget" href="##" class="am-icon-plus-circle am-icon-md"></a></td>
				</tr>
			</table>
		</td>
		<td style="min-width:10px;"></td>
		<td width="80%" style="height:100%;vertical-align:top">
			<div class="am-alert am-alert-warning" style="margin:5px 0;">插件区域开放了JS、CSS、iframe等所有风险标签，请合理使用</div>
			<form class="am-form" id="form-add-article">
				<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
				<input id="id-article-id" type="hidden" name="articleId" value="0" />
				<input id="id-article-title" type="text" placeholder="请输入标题，尽量短，不显示" name="title"/>
				<div class="editormd" id="id_editormd">
					<textarea class="editormd-markdown-textarea" name="markdown"></textarea>
					<textarea class="editormd-html-textarea" name="html"></textarea>
				</div>
				<input class="am-btn am-btn-success am-btn-xl" type="submit" value="提交"/>
			</form>
		</td>
	</tr>
</table>
<@jblogAdmin.editormdJs htmlDecode="on"/>
<@jblog.otherJs>
function checkWidget(o){
	$("#id-article-id").val($(o).parent().attr("data"));
	$("#id-article-title").val($(o).parent().prev().html());
	editormdElement.setMarkdown($(o).parent().attr("markdown"));
}

function deleteWidget(o){
	var articleid = $(o).parent().attr("data");
	new fn_alert("确定永久删除这个Widget？ID：" + articleid).show(function(me){
        $.ajax({
          "url" : "${rc.contextPath}/admin/deleteWidget",
          beforeSend : function(){dimmer(true);},
          data  : {"${_csrf.parameterName}":"${_csrf.token}","articleId":articleid},
          type  : "post",
          success : function(data){
          	dimmer(false);
            $("#tb-widgets td[data='" + articleid + "']").parent().remove();
          },
          error : function(){alert("抱歉，来宾帐户无法对系统做出修改！");dimmer(false);},
          dataType : "json"
        });
	});
}

//排序，上下翻转，同时post到服务器改变顺序
function move(o){
	var dom = $(o);
	var direction = dom.attr("direction");

	if(direction != "up" && direction != "down"){return;}
	var theId = dom.parents("td").attr("data");
	var otherId  = (direction == "up") ? (dom.parents("tr").eq(0).prev("tr").children("td").eq(1).attr("data")) : (dom.parents("tr").eq(0).next("tr").children("td").eq(1).attr("data"));
	if(typeof(otherId) == "undefined"){return;}
	$.ajax({
		url : "${rc.conftextPath}/admin/widgets/move",
		data: {"theId":theId,"otherId":otherId,"${_csrf.parameterName}":"${_csrf.token}"},
		type: "post",
		success : function(){
			var trDom = dom.parents("tr").eq(0);
			if(direction == "up")
				trDom.prev().before(trDom);
			else if(direction == "down")
				trDom.next().after(trDom);
		},
		error : function(){
			alert("抱歉，来宾帐户无法对系统做出修改！");
		},
		dataType : "json"
	});
}

$(function(){
	var addWidget = function(){
		$("#id-article-id").val("0");
		$("#id-article-title").val("");
		editormdElement.setMarkdown("");
	};

	$("#btn-add-widget").bind("click",addWidget);

	$("#form-add-article :submit").bind("click",function(){
		$.ajax({
			type : "post",
			url  : "${rc.contextPath}/admin/addOrUpdateWidget",
			data : $("#form-add-article").serialize(),
			success : function(result){
				if(result.resultCode == 0){
					var title = $("#id-article-title").val();
					var markdown = html(editormdElement.getMarkdown());
					var articleId = $("#id-article-id").val();
					if(articleId == 0){
						$("#tb-widgets tr:last").prev().after('\
							<tr>\
								<td style="width:100%;">' + title + '</td>\
								<td style="min-width:50px;" data='+result.data.articleId+' markdown="' + markdown + '">\
									<span class="am-icon-edit" onclick="checkWidget(this);"></span>\
									<span class="am-icon-trash" onclick="deleteWidget(this)"></span>\
									<span class="am-icon-unsorted">\
										<div direction="up" class="icon-up-block" onclick="move(this)">&nbsp;</div>\
										<div direction="down" class="icon-down-block" onclick="move(this)">&nbsp;</div>\
									</span>\
								</td>\
							</tr>\
						');
						addWidget();
						alert("添加成功");
					}else{
						$("#tb-widgets td[data=" + articleId + "]").attr("markdown",markdown);
						addWidget();
						alert("修改成功");
					}
				}else{
					alert(result.message);
				}
			},
			error : function(){
				alert("抱歉，来宾帐户无法对系统做出修改！");
			},
			dataType : "json"
		});

		return false;
	})
});
</@jblog.otherJs>